import React, {useState,} from 'react'
import {connect,} from 'react-redux'
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import {List, WhiteSpace, WingBlank,} from 'antd-mobile'
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton";
import ClickableBtn from "../../../../shared-components/ClickableBtn/ClickableBtn";
import {onSelected,} from "../../../../utils/commonfunc";
import {liveCategory} from "../../../../utils/mockdata";

const LiveCategory = props => {
    const Item = List.Item

    const {
        history,
        catalog,
        doSaveLiveCatalog,
    } = props

    const [curCategoryIndex, setCurCategoryIndex] = useState(catalog)
    const [allCategory, setAllCategory,] = useState([...liveCategory.ent, ...liveCategory.sport,])
    const [curCategory, setCurCategory,] = useState({
        title: '',
        active: false,
    })

    const handleCategoryItemClick = (e, selectedItem) => {
        onSelected(
            selectedItem,
            allCategory,
            'title',
            'active',
            setAllCategory,
            setCurCategory,
            )
        const i = allCategory.findIndex(item => item.title === selectedItem.title)
        setCurCategoryIndex(i)
    }

    const submitCatalog = index => {
        doSaveLiveCatalog(index)
        history.goBack()
    }

    const entCategoryTemplate = (liveCategory.ent.map((entItem, index) => (
        <ClickableBtn
            active={`${entItem.active}`}
            key={index}
            onClick={e => handleCategoryItemClick(e, entItem)}
        >
            {entItem.title}
        </ClickableBtn>
    )))

    const sportCategoryTemplate = (liveCategory.sport.map((sportItem, index) => (
        <ClickableBtn
            active={`${sportItem.active}`}
            key={index}
            onClick={e => handleCategoryItemClick(e, sportItem)}
        >
            {sportItem.title}
        </ClickableBtn>
    )))

    return (
        <div className='fixed-full-container'>
            <GoBackLayout
                history={history}
                title='直播分类'
            >
                <div
                    className='fix-full-container-minus-nav-bar full-width-fff-background'
                >
                    <List>
                        <Item>
                            当前分类: {curCategory.title}
                        </Item>
                    </List>
                    <WhiteSpace style={{backgroundColor: '#F8F8F8',}}/>
                    <List
                        renderHeader='娱乐'
                    >
                        <WingBlank>
                            <div className='flex flex-wrap-container'>
                                {entCategoryTemplate}
                            </div>
                        </WingBlank>
                    </List>

                    <List
                        renderHeader='体育'
                    >
                        <WingBlank>
                            <div className='flex flex-wrap-container'>
                                {sportCategoryTemplate}
                            </div>
                        </WingBlank>
                    </List>

                    <WingBlank>
                        <div className='mg-t-4'>
                            <CustomButton
                                shadow='0px 6px 10px 0px rgba(250,114,104,0.4)'
                                onClick={() => submitCatalog(curCategoryIndex)}
                            >
                                保存
                            </CustomButton>
                        </div>
                    </WingBlank>

                </div>
            </GoBackLayout>
        </div>
    )
}

const mapState = state => ({
    catalog: state.star.catalog,
})

const mapDispatch = dispatch => ({
    doSaveLiveCatalog: payload => dispatch.star.doSaveLiveCatalog(payload),
})

export default connect(mapState, mapDispatch)(LiveCategory)
